
<img src="<?php echo $imageUploaded; ?>" id="real-img" style="display:none;"/>
<style>
    .img-upload{
	width: 103px;
    }
</style>

<div class="content">
    <div class="tabb">
	<a href="<?php echo SITE_NAME_URL; ?>">Home</a><a href="<?php echo url('product'); ?>">Products</a><a href="<?php echo url('product'); ?>"> Custom Phone Cases </a><span><?php echo $model->name; ?></span>
    </div>

    <div class="box-custom">
	<div class="left-custom">

	    <div class="title-cus">
		<?php echo $model->name; ?>
	    </div>
	    <div class="text-cus">
		<div class="img-chang">
		    <div class="repre-img">
			<img src="<?php echo $model->getImgRepresentation(); ?>"/>
			<?php /* <a href="<?php echo url('product'); ?>"><img src="<?php echo $model->getImgRepresentation(); ?>"/></a> */ ?>
		    </div>
		</div>
	    </div>
	    <div class="title-cus">
		Change Images
	    </div>
	    <div class="text-cus">
		<div class="upload_avatar">
		    <div>
			<img class="img-upload" src="<?php echo $imageUploaded; ?>" id="change-img"/>
		    </div>
		</div>
	    </div>
	    <?php /*
	      <div class="title-cus">
	      Swicht View
	      </div>
	      <div class="text-cus">
	      <div class="switch">
	      <a class="border1"></a>
	      <a class="border2"></a>
	      </div>
	      </div>
	     * 
	     */ ?>
	</div><!--left-custom-->
	<div class="custom" id="print">
	    <div class="wrap-phone-case">
		<img id="visible-img" class="img-custom img-upload" src="<?php echo $imageUploaded; ?>"/>
		<img id="phonecase-img" src="<?php echo $model->getImg() ?>"/>
		<img id="invisible-img" class="img-custom img-upload" src="<?php echo $imageUploaded; ?>"/>    
	    </div>
	</div><!--custom-->
	<div class="right-custom">

	    <?php
	    ////////////// Rotate /////////////
	    ?>
	    <div class="title-cus">
		Rotate
	    </div>
	    <div class="text-cus">
		<div id="rotate-btn"></div>
	    </div>

	    <?php
	    ////////////// Scale /////////////
	    ?>
	    <div class="title-cus">
		Scale
	    </div>
	    <div class="text-cus">
		<div id="slider-range-min"></div>
	    </div>

	    <div class="title-cus">
		Your order
	    </div>
	    <div class="text-cus">
		<form action="" method="post">
		    <table cellpadding="0" cellspacing="0" class="table-order">
			<tr>
			    <td colspan="2">
				<?php echo $model->name ?>
			    </td>

			</tr>
			<tr>
			    <td>
				<p class="price-cus"><?php echo $model->getPrice(); ?></p>
			    </td>
			    <td>
				Qty<input type="text" style="width:27px;" class="total_order" value="1" name="total_order"/>
			    </td>
			</tr>
		    </table>

		    <textarea name="img_canvas" id="img-canvas" style="display: none;"></textarea>
		    <input type="hidden" name="image-uploaded" value="<?php if (isset(Yii::app()->session['image_uploaded'])) echo Yii::app()->session['image_uploaded'] ?>" id="image-uploaded"/>
		    <input type="hidden" name="custom-width" value="" id="custom-width"/>    
		    <input type="hidden" name="real-width" value="" id="real-width"/>    
		    <input type="hidden" name="top-img" value="" id="top-img"/>
		    <input type="hidden" name="left-img" value="" id="left-img"/>
		    <input type="hidden" name="degree-img" value="" id="degree-img"/>

		    <input type="submit" class="btn btn-primary btn-large" value="Add To Cart" style="width:100%" name="submit"/>
		</form>
	    </div>
	</div><!--right-custom-->


	<div id="upload-img-over-lay"<?php if (isset(Yii::app()->session['image_uploaded'])) echo 'style="display:none"' ?>>
	    <span id='close-overlay'><img src="<?php echo WWW_URL ?>images/close-icon.png"/></span>
	    <div id="instruction-upload">
		<h3>Upload your image</h3>
		<p class="instructions">
		    For best results the image should be 1600 x 1600px to cover a phone case. <br>Smaller images can be used but may not cover case sides.
		</p>

		<span class="btn btn-success fileinput-button">
		    <i class="glyphicon glyphicon-plus"></i>
		    <span>Select files...</span>
		    <!-- The file input field used as target for the file upload widget -->
		    <input id="fileupload" type="file" name="files[]"/>
		</span>
		<br>
		<br>
		<!-- The global progress bar -->
		<div id="progress" class="progress progress-striped active">
		    <div class="progress-bar progress-bar-success bar"></div>
		</div>
		<!-- The container for the uploaded files -->
		<div id="files" class="files"></div>
	    </div>
	</div>	
    </div><!--box-custom-->  
</div><!--content-->



<?php $this->renderPartial('script'); ?>